Blog Type Card

  • STEPS

    1. html

    
                     
    
    
    
                      <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
          <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 nw-box"> <img src="images/1.jpg" class="img-responsive" alt="news">
            <h4>Lorem ipsum dolor sit amet</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicng eiusmod tempor incididunt ut labore etdolore agna aliqua. Ut enim ad minim veniam, quis nostrudis nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor commodo in.</p>
            <a href="#">Read More <i class="fa fa-arrow-right"></i></a> </div>
        </div>
    
    
    
        
    
                    

    2. css

    
    
    
                   
    
    
    
    
                    .news {
    	padding: 60px 0 70px 0;
    }
    .news h2 {
    	margin: 0;
    	padding: 0;
    	text-align: center;
    	font-weight: 700;
    	color: #000;
    	font-size: 21px;
    	text-transform: uppercase;
    }
    .news hr {
    	width: 90px;
    	height: 1px;
    	margin: 10px auto 30px auto;
    	padding: 0;
    	background: #000;
    	border: none;
    }
    .nw-box {
    	border-radius: 0 23px 0 23px;
    	margin: 0;
    	padding: 0 !important;
    	border: 1px solid #f0f0f0;
    	overflow: hidden;
    	-webkit-transition: .4s;
    	-moz-transition: .4s;
    	-o-transition: .4s;
    	transition: .4s;
    }
    .nw-box:hover {
    	border: 1px solid #006eb1;
    	-webkit-box-shadow: 0px 7px 17px 0px rgba(0,0,0,0.27);
    	-moz-box-shadow: 0px 7px 17px 0px rgba(0,0,0,0.27);
    	box-shadow: 0px 7px 17px 0px rgba(0,0,0,0.27);
    }
    .nw-box img {
    	width: 100%;
      max-height:250px;;
    }
    .nw-box h4 {
    	margin: 0;
    	padding: 15px 20px 3px 20px;
    	text-align: left;
    	font-weight: bold;
    	color: #024280;
    	font-size: 16px;
    	line-height: 20px;
    	text-transform: uppercase;
    }
    .nw-box p {
    	margin: 0;
    	padding: 5px 20px 10px 20px;
    	text-align: justify;
    	font-weight: 400;
    	color: #000;
    	font-size: 13px;
    	line-height: 23px;
    }
    .nw-box a {
    	margin: 0;
    	padding: 0 20px 20px 20px;
    	display: inline-block;
    	text-align: left;
    	font-weight: bold;
    	color: #000;
    	font-size: 13px;
    	line-height: 21px;
    }
    .nw-box a .fa {
    	margin: 0 0 0 2px;
    	-webkit-transition: .4s;
    	-moz-transition: .4s;
    	-o-transition: .4s;
    	transition: .4s;
    }
    .nw-box a:hover .fa {
    	margin: 0 0 0 5px;
    }
    .nw-box a:hover, .nw-box a:focus {
    	color: #000;
    }